<div id="root">
<myhard :data="arr1">
    <myhardson prop="id" title="编号"></myhardson>
    <myhardson prop="name" title="姓名"></myhardson>
    <myhardson prop="age" title="年纪"></myhardson>
    <myhardson title="性别" v-slot="item">{{item.sex==1?"男":"女"}}</myhardson>
</myhard>

</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  Vue.component('myhardson',{
      props:["prop","title"],
       template:`
       <span></span>
       
       
       
       `,
       mounted(){
   
       this.$parent.arr2.push(this)

       }

  })
  Vue.component('myhard',{
    props:["data"]
    ,data(){
        return {arr2:[]}
    }  
    
    ,
template:`
    <table border="1" cellspacing="0" cellpadding="10">
     <tr>
    <th v-for="item in arr2">
    {{item.title}}
        </th>
    </tr>


    <tr v-for="item1 in data">
    <td v-for="(item2,i) in arr2"> 
{{$children[i].$scopedSlots.default?$children[i].$scopedSlots.default(item1)[0].text:item1[item2.prop]}}
        </td>
     </tr>

     <slot> </slot>
        </table> 
    `,
    mounted(){
     console.log(this.$children[3].$scopedSlots.default({sex:1})[0].text)
    //  $children[i].$scopedSlots.default? $children[i].$scopedSlots.default(item1)[0].text

    }
    
})
const vm = new Vue({
    el: "#root",
    data: {
        arr1:[
            {id:1,name:'zhn',age:18,sex:1},
            {id:2,name:'zhn',age:18,sex:2},
            {id:3,name:'zhn',age:18,sex:2},
            {id:4,name:'zhn',age:18,sex:1}
        ]
    }
})
</script>
